<!DOCTYPE html>
<html lang="Zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calculator</title>
    <link rel="stylesheet" type="text/css" href="./Calculator.css">
    <script src="./jquery.min.js"></script>
    <script src="./Calculator.js"></script>
</head>

<body>
    <div class="cal-btn">Calculator</div>
    <div class="bg"></div>
    <div class="tips">

        <ul>
            <li>
                <div class="explain">ESC</div>
                <div class="tips-border">
                    <div class="tips-btn gray">AC</div>
                </div>
            </li>
            <li>
                <div class="explain">SPACE</div>
                <div class="tips-border">
                    <div class="tips-btn gray">+/-</div>
                </div>
            </li>
            <li>
                <div class="explain">CTRL</div>
                <div class="tips-border">
                    <div class="tips-btn gray">%</div>
                </div>
            </li>
            <li>
                <div class="explain">ENTER</div>
                <div class="tips-border">
                    <div class="tips-btn yellow">=</div>
                </div>
            </li>
            <li>
                <div class="delete-one">BACKSPACE</div>
            </li>
        </ul>




    </div>
    <div class="Calculator">
        <div class="header">
            <div class="close">
                ×
            </div>
        </div>
        <div class="displayBox">
            <div class="display"></div>
        </div>

        <div class="btns">
            <div class="border">
                <div class="btn AC gray">AC</div>
            </div>
            <div class="border">
                <div class="btn addSubtract gray">+/-</div>
            </div>
            <div class="border">
                <div class="btn percent gray">%</div>
            </div>
            <div class="border">
                <div class="btn divide yellow">÷</div>
            </div>
            <div class="border">
                <div class="btn seven">7</div>
            </div>
            <div class="border">
                <div class="btn eight">8</div>
            </div>
            <div class="border">
                <div class="btn nine">9</div>
            </div>
            <div class="border">
                <div class="btn multiply yellow">×</div>
            </div>
            <div class="border">
                <div class="btn four">4</div>
            </div>
            <div class="border">
                <div class="btn five">5</div>
            </div>
            <div class="border">
                <div class="btn six">6</div>
            </div>
            <div class="border">
                <div class="btn subtract yellow">-</div>
            </div>
            <div class="border">
                <div class="btn one">1</div>
            </div>
            <div class="border">
                <div class="btn two">2</div>
            </div>
            <div class="border">
                <div class="btn three">3</div>
            </div>
            <div class="border">
                <div class="btn add yellow">+</div>
            </div>
            <div class="border hidden">
                <div class="btn">0</div>
            </div>
            <div class="border hidden">
                <div class="btn">0</div>
            </div>
            <div class="border">
                <div class="btn point">.</div>
            </div>
            <div class="border">
                <div class="btn equal yellow">=</div>
            </div>
        </div>
        <div class="zero-border">
            <div class="zero-btn zero">0</div>
        </div>
    </div>
</body>

</html>